<template>
  <div>
    <div class="_contract">
      <div class="_header">
        <div class="_title">无车承运人管理平台无车承运平台运输电子合同</div>
        <div class="_contractnumber">合同编号：<span>{{form.contractNo }}</span></div>
        <div class="_contracttime">签约时间：<span>{{form.gmtCreated}}</span></div>
      </div>
      <div class="_bothSides">
        <div class="_partyA">甲方：{{form.partyA}}</div>
        <div class="_partyB">乙方：{{form.partyB}}</div>
      </div>
      <div class="_main">
        <div class="_desc">根据《中华人民共和国合同法》及有关法律、法规的规定，为保证双方的合法权益，经甲乙双方协商一致，甲乙双方在自愿、平等、诚信的基础上签订本合同，以便双方共同遵守。</div>
        <div class="_firstPart">
          <div class="_subtitle">一、承运货物的相关详细信息和安全要求</div>
          <div class="_cargo">
            <div class="_ctitle">1、货物信息表</div>
            <div class="_cargoinformation">
              <table class="_table">
                <tbody>
                  <tr>
                    <td>起运地</td>
                    <td>{{form.startAddress }}</td>
                    <td>发货人</td>
                    <td>{{form.shipperName}}</td>
                    <td>手机</td>
                    <td>{{form.shipperPhone}}</td>
                  </tr>
                  <tr>
                    <td>目的地</td>
                    <td>{{form.endAddress}}</td>
                    <td>收货人</td>
                    <td>{{form.consigneeName}}</td>
                    <td>手机</td>
                    <td>{{form.consigneePhone}}</td>
                  </tr>
                  <tr>
                    <td>实际承运方</td>
                    <td>{{form.driverName}}</td>
                    <td>联系电话</td>
                    <td>{{form.driverPhone}}</td>
                    <td>货物名称</td>
                    <td>{{form.goodsType}}</td>
                  </tr>
                  <tr>
                    <td>计划数量</td>
                    <td>{{form.weight}}</td>
                    <td>货物描述</td>
                    <td>无</td>
                    <td>货值（元）</td>
                    <td>{{form.goodsValue}}</td>
                  </tr>
                  <tr>
                    <td>运费金额（元）</td>
                    <td>￥{{form.amount}}</td>
                    <td>合同签订时间</td>
                    <td>{{form.gmtCreated}}</td>
                    <td>货物装车时间 </td>
                    <td>{{form.lastLoadingTime }}</td>
                  </tr>
                  <tr>
                    <td>是否开票 </td>
                    <td>是</td>
                    <td>备注</td>
                    <td colspan="3"></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="_lawpart">
          <div class="_lawtitle">第三条 承运服务要求请遵守</div>
          <div class="_detail">
            <div class="_p">
              <p>1.乙方提供充足的运力及车辆资源用于甲方货物运输，运输车辆车型及车况应符合甲方货物长途运输的安全要求。</p>
            </div>
            <div class="_p">
              <p>
                <p>2.乙方确保司机及车辆证件齐全且真实有效。因证件问题给甲方造成的损失由乙方承担。</p>
            </div>
            <div class="_p">
              <p>3.在装货与承运期间，乙方相关人员须遵守协议内容及甲方公司相关规章制度。</p>
            </div>
            <div class="_p">
              <p>4.装货要求</p>
              <p class="_span">（1）乙方须按照合同约定的时间、地址将货物送交给甲方指定的收货人。</p>
              <p class="_span">（2）乙方装车是应负责对所装货物品种、数量仔细核对。对于残缺或损坏的货物须及时向仓库提出更换。</p>
              <p class="_span">（3）装车完毕，乙方须当场与甲方人员办理发货手续，在发货单上签字确认，带齐发货资料后，方可出厂。</p>
            </div>
            <div class="_p">
              <p>5.运输要求</p>
              <p class="_span">（1）运输途中，未经甲方同意，乙方不可中途换车或配货。否则由此造成的损失由乙方承担。</p>
              <p class="_span">（2）乙方确保做好货物防护工作。货物从装车后至交付指定收货人签收前，如货物出现损坏、被盗、丢失等问题，均由乙方按货物价值赔偿给甲方。</p>
              <p class="_span">（3）乙方运输途中发生意外事故，须及时告知甲方，并按照甲方的应急处理预案及时处理。</p>
              <p class="_span">（4）乙方运输途中产生的过路费、生活费等费用，均由乙方自行负责。</p>
            </div>
            <div class="_p">
              <p>6.卸货要求</p>
              <p class="_span">（1）乙方确保货物准时送达指定收货人。如未及时送达，造成的损失由乙方承担。</p>
              <p class="_span">（2）乙方卸货时须核对收货人信息，确保卸货准确。</p>
              <p class="_span">（3）卸货完毕后，如需上传回执单，乙方需收货人填写回执单盖章，并及时上传至伟亿通平台。</p>
              <p class="_span">（4）乙方运输途中产生的过路费、生活费等费用，均由乙方自行负责。</p>
            </div>
            <div class="_p">
              <p>7.甲方确保交于乙方的货物符合相关法律、法规的要求。如出现甲方货物不符合要求而造成的损失，由甲方自行承担。如乙方因此造成损失，有权向甲方要求赔偿。</p>
            </div>
          </div>
        </div>
        <div class="_lawpart">
          <div class="_lawtitle">第四条 运输价格</div>
          <div class="_detail">
            <div class="_p">
              <p>1.按照合同约定的货物数量、重量、收货地址确定相应的价格。</p>
            </div>
            <div class="_p">
              <p>2.此价格为货物运输价格。如有其它费用，双方自行协商。</p>
            </div>
          </div>
        </div>
        <div class="_lawpart">
          <div class="_lawtitle">第五条 费用结算</div>
          <div class="_detail">
            <div class="_p">
              <p>1.甲方以方式支付乙方运费。</p>
            </div>
            <div class="_p">
              <p>2.乙方负责为甲方开具正式运输发票。</p>
            </div>
          </div>
        </div>
        <div class="_lawpart">
          <div class="_lawtitle">第六条 合同时效及争议解决</div>
          <div class="_detail">
            <div class="_p">
              <p>1.接单、抢单即视为认可本合同，有效期自接单、抢单成功起，至甲方付款、乙方上传回执单、开具发票止。</p>
            </div>
            <div class="_p">
              <p>2.本合同未尽事宜，可由双方协商一致后，签订补充协议，作为本合同的补充合同。补充合同与本合同具有同等效力。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="_signup">
        <div class="_partyA">
          <div class="_sign">甲方：{{form.partyA}}</div>
          <div class="_signature">(签章)

          </div>
        </div>
        <div class="_partyB">
          <div class="_sign">乙方：{{form.partyB}}</div>
          <div class="_signature">(签章)
            <img src="http://third-image.oss-cn-hangzhou.aliyuncs.com/03818b5fd6c94fd8914acd898715906a.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  export default {
    name: 'contract',
    data() {
      return {
        emptyForm: {},
        dialogVisible: false,
        dialogImageUrl: '',
        uploadUrl: this.BASE_API_URL + 'ntocc-tps-api/fileUpload',
        form: {},
      }
    },
    computed: {},
    created() {},
    methods: {
      getContract(code) {
        request({
          url: `/arpa-basic-api/orderDetailContract/${code}`,
          method: 'get'
        }).then(response => {
          this.form = response.data
        })
      },
    }
  }
</script>
<style scoped lang="scss">
  ._contract {
    margin: 0 auto;
    width: 700px;

    ._header {
      width: 100%;

      ._title {
        font-size: 24px;
        margin: 0 auto;
        text-align: center;
        line-height: 50px;
        margin-top: 30px;
        font-weight: normal;
      }

      ._contractnumber,
      ._contracttime {
        text-align: right;
        margin-bottom: 20px;
        font-size: 13px;

        span {
          text-decoration: underline;
        }
      }
    }

    ._bothSides {
      margin: 40px 0;

      ._partyA,
      ._partyB {
        line-height: 25px;
        font-size: 16px;
      }
    }

    ._main {
      ._desc {
        text-indent: 2em;
        margin-top: 30px;
        line-height: 25px;
        font-size: 13px;
      }

      ._firstPart {
        margin-top: 20px;

        ._subtitle {
          font-size: 16px;
          line-height: 2em;
        }

        ._cargo {
          margin-top: 10px;

          ._ctitle {
            font-size: 16px;
            line-height: 2em;
          }

          ._cargoinformation {
            width: 100%;

            ._table {
              margin-top: 10px;
              width: 100%;
              border-spacing: 0;
              border-collapse: collapse;
              border: 1px solid #ddd;
            }

            ._table>tbody>tr>td,
            ._table>tbody>tr>th,
            ._table>tfoot>tr>td,
            ._table>tfoot>tr>th,
            ._table>thead>tr>td,
            ._table>thead>tr>th {
              width: 16.667%;
              padding: 8px 0;
              box-sizing: border-box;
              text-align: center;
              vertical-align: center;
              border: 1px solid #ddd;
            }
          }
        }
      }

      ._lawpart {
        margin-top: 10px;
        width: 100%;

        ._lawtitle {
          font-size: 16px;
          line-height: 2em;
        }

        ._detail {
          text-indent: 2em;
          line-height: 2em;
        }
      }
    }

    ._signup {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      ._partyA,
      ._partyB {
        min-width: 240px;

        ._sign {
          font-size: 16px;
        }

        ._signature {
          margin-top: 20px;
          width: 100%;
          text-align: left;
          line-height: 160px;
          height: 160px;
          position: relative;
          img{
            width: 150px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
</style>
